<template>
  <!-- scroll-wrapper 这个类名在全局样式中有设置 -->
  <div class="scroll-wrapper" @scroll="hScroll" ref="refScroll">
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="更新成功了哦^_^">
    <!-- {{channel.name}}的内容 -->
      <van-list
        v-model="loading"
        :finished="finished"
        loading-text="正在加载不要急哦^—^"
        finished-text="真的没有了>_<"
        @load="onLoad"
        >
      <van-cell v-for="(item, idx) in list"
       :key="idx"
       :title="item.title"
       @click="$router.push('/article/' + item.art_id.toString())">
       <!-- cell的label属性 自定义标题下方的内容 -->
       <div slot="label">
         <!-- 图片宫格 column-num 代表有几个格子 -->
          <van-grid :column-num="item.cover.images.length">
            <van-grid-item v-for="(img, idx) in item.cover.images" :key="idx">
              <van-image :src="img" Lazyload></van-image>
            </van-grid-item>
          </van-grid>
         <!-- 图片下面的文字 -->
          <div class="one">
            <span>{{item.aut_name}}</span>
            <span>{{item.comm_count}}评论</span>
            <span>{{item.pubdate | relativeTime}}</span>

            <!-- 如果是登录用户会出现一个x，这里要取vuex中的token来判断 -->
            <span
            class="close"
            @click.stop="hClose(item)"
            v-if = '$store.state.tokenInfo.token'
            >
               <van-icon name="cross"></van-icon>
            </span>
          </div>
       </div>
      </van-cell>
    </van-list>
  </van-pull-refresh>
  </div>
</template>

<script>
import { getArticleList } from '@/api/articleList.js'
export default {
  name: 'ArticleList',
  props: ['channel'],
  data () {
    return {
      timestamp: null, // 时间戳
      list: [], // 数据项
      loading: false, // 发是否正在加载
      finished: false, // 是否加载完成
      isLoading: false // 是否在刷新过程中
    }
  },
  created () {
    // console.log('list', this.channel, this.list)
    // console.log(this.channel, 'created监听')
    this.$eventBus.$on('delArticle', (obj) => {
      const { articleId, channelId } = obj
      console.log('收到了事件总线发布的事件', this.channel.name, articleId, channelId)
      this.delArticle(articleId, channelId)
    })
  },
  methods: {
    async onLoad () {
      if (!this.timestamp) {
        this.timestamp = Date.now()
      }
      // 异步更新数据
      const result = await getArticleList(this.channel.id, Date.now())
      // console.log('文章列表', result)
      // 获取文章列表
      const arr = result.data.data.results
      this.list.push(...arr)
      // console.log('文章数组', this.list)
      this.timestamp = result.data.data.pre_timestamp
      // 加载状态结束
      this.loading = false
      // 数据全部加载完成
      if (arr.length === 0) {
        this.finished = true
      }
    },
    // 下拉刷新
    async onRefresh () {
      // 重新发请求 取最新数据
      const result = await getArticleList(this.channel.id, Date.now())
      // console.log('刷新回来的数据', result)
      // unshift放在最前面数据 push放在后面
      this.list.unshift(...result.data.data.results)
      this.isLoading = false
      this.$toast(`更新了${result.data.data.results.length}条数据`)
    },
    // 用户点击关闭按钮
    hClose (item) {
      // console.log('点击关闭按钮', item)
      // 取出当前文章得id
      const articleId = item.art_id.toString()
      // 通知父组件去显示弹层
      this.$emit('showMoreAction', articleId)
      // console.log('文章id', articleId)
    },
    // 进行文章删除
    delArticle (articleId, channelId) {
      console.log('本地删除运行')
      // 检查频道id
      if (this.channel.id !== channelId) {
        // 频道不同不能进行删除
        return
      }
      // 去当前文章列表找到相同id的文章
      // findIndex会找出下表 如果找不到会返回-1
      const idx = this.list.findIndex(item => {
        return item.art_id.toString() === articleId
      })
      // console.log('删除的下标', idx)
      if (idx !== -1) {
        // 找到就删除
        this.list.splice(idx, 1)
      }
    },
    // 记忆滚动条位置
    hScroll () {
      this.scrollTop = this.$refs.refScroll.scrollTop
    },
    // 当组件激活时使用
    activated () {
    // console.log('激活 activated...activated...activated...activated...')
      if (this.scrollTop) {
      // 恢复滚动条位置
        this.$refs.refScroll.scrollTop = this.scrollTop
      }
    }
  }
}

</script>

<style lang="less" scoped>
.one {
  display: flex;
  span{
     margin-right: 10px;
  }
  .close{
    // 父级元素必须是flex才可以到右边
    margin-left: auto;
  }
}

</style>
